<template>
  <div class="merchant-platform-container">

    <BasicTable @register="registerTable" class="table-container">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
            {
              label: '详情',
              onClick: () => router.push({
                name: 'detail',
                query: {
                  id: record.id
                },
              }),
            },
          ]" />
        </template>
      </template>
    </BasicTable>

  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getBasicColumns } from './tableData';
import Dictionary from '@/utils/dictionary';
import { useRouter } from "vue-router";
import { getOrderSettlement } from "@/api/hby/orderSettlement/index";
import { IOrderSettlement } from "@/api/hby/orderSettlement/type";
import { formatMoney } from '@/utils/number';

const router = useRouter();
const dicts = Dictionary.getLocalMulti(['settlementStatus', 'orderPayStatus', 'orderStatus']);

const [registerTable] = useTable({
  api: getOrderSettlement,
  columns: getBasicColumns(),
  showIndexColumn: true,
  clickToRowSelect: false,
  useSearchForm: true,
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  formConfig: {
    labelWidth: 100,
    schemas: [
      {
        field: `keyWord`,
        label: `关键词搜索`,
        component: 'Input',
        colProps: {
          span: 4,
        },
      },
      // {
      //   field: `payStatus`,
      //   label: `支付状态`,
      //   component: 'Select',
      //   componentProps: {
      //     fieldNames: { label: 'dictLabel', value: 'dictValue' },
      //     options: dicts.orderPayStatus,
      //   },
      //   colProps: {
      //     span: 4,
      //   },
      // },
      {
        field: `suborderStatus`,
        label: `订单状态`,
        component: 'Select',
        componentProps: {
          fieldNames: { label: 'dictLabel', value: 'dictValue' },
          options: dicts.orderStatus,
        },
        colProps: {
          span: 4,
        },
      },
      // {
      //   field: `status`,
      //   label: `结算状态`,
      //   component: 'Select',
      //   componentProps: {
      //     fieldNames: { label: 'dictLabel', value: 'dictValue' },
      //     options: dicts.settlementStatus,
      //   },
      //   colProps: {
      //     span: 4,
      //   },
      // },
      {
        field: `[startTime, endTime]`,
        label: `下单时间`,
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          placeholder: ['开始时间', '结束时间'],
        },
        colProps: {
          span: 6,
        },
      },

    ],
  },
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
  },
  afterFetch: (data: IOrderSettlement[]) => {
    return data.map((item) => {
      return {
        ...item,
        payStatusText: dicts.orderPayStatus.find((v) => v.dictValue == item.payStatus)?.dictLabel,
        suborderStatusText: dicts.orderStatus.find((v) => v.dictValue == item.suborderStatus)?.dictLabel,
        totalAmount: isNaN(item.totalAmount) ? item.totalAmount : formatMoney({ money: item.totalAmount, isShowFree: false }),
        payAmount: isNaN(item.payAmount) ? item.payAmount : formatMoney({ money: item.payAmount, isShowFree: false }),
        merchantFee: isNaN(item.merchantFee) ? item.merchantFee : formatMoney({ money: item.merchantFee, isShowFree: false }),
        unSplitAmount: isNaN(item.unSplitAmount) ? item.unSplitAmount : formatMoney({ money: item.unSplitAmount, isShowFree: false }),
      };
    });
  },
});



</script>

<style lang="less" scoped>
.merchant-platform-container {

  .table-container {
    .image-text {
      display: flex;
      align-items: center;
      gap: 16px;

      .text {
        width: 100px;
        text-align: left;
      }
    }
  }
}
</style>
